<template>
    <el-card class='margin10'>
        <div class='table-search flex flex-col'>
            <div class='flex justify-between items-center mb-2'>
            <div>
                <slot name='CardHeader'></slot>
            </div>
            <el-button
                type='text'
                @click='toggleSearch'
            >
                高级搜索<i :class='{"el-icon-arrow-down": !isShow, "el-icon-arrow-up": isShow}' />
            </el-button>
        </div>
            <div
                 ref='searchEl'
                 class='table-search-form'
             >
                 <slot name='search' />
             </div>
             <slot />
             <el-pagination
                class='marginTop20'
                 :current-page='page'
                 :page-sizes='[10, 20, 50, 100]'
                 :page-size='pageSize'
                 layout='total, prev, pager, next, jumper'
                 :total='total'
                 @size-change='handleSizeChange'
                 @current-change='handleCurrentChange'
             />
         </div>
    </el-card>
    
</template>

<script lang="ts">
import { defineComponent, ref, SetupContext } from 'vue'
import { slide } from '/@/utils/animate'
export default defineComponent({
    name: 'TableSearch',
    props: {
        page: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        total: {
            type: Number,
            default: 0
        }
    },
    emits:['size-change','current-change'],
    setup(props,context:SetupContext){
        const isShow = ref(false)
        const searchEl = ref(null)
        const handleSizeChange = (v:number)=>{context.emit('size-change',v)}
        const handleCurrentChange = (v:number)=>{context.emit('current-change',v)}
        const toggleSearch = () => {
            isShow.value = !isShow.value
            slide(searchEl, isShow.value)
        }
        return {handleSizeChange,handleCurrentChange,isShow,searchEl,toggleSearch}
    }
})
</script>

<style lang="postcss" scoped>
.table-search-form {
    overflow: hidden;
    height: 0;
}
</style>